<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>活动管理</title>

    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
    <link href="assets/css/bootstrap-switch.min.css" rel="stylesheet">


</head>

<body class="sticky-header">

<div id="app">
    <!--Start left side Menu-->
    <div id="nav-left" class="left-side sticky-left-side">
    </div>
    <!--End left side menu-->


    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <script src="assets/js/commonPage/header.js"></script>
        <!-- header section end-->


        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row" style="background-color: white;">
                <div class="" style="background-color: white;border-bottom: solid black 1px">
                    <h3 style="margin-left: 10px">活动管理</h3>
                </div>
                <div class="" style="background-color: white;margin-top: 30px;">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th scope="col">商品id</th>
                            <th scope="col">商品名</th>
                            <th scope="col">商品原价</th>
                            <th scope="col">商品特点</th>
                            <th scope="col">商品类型</th>
                            <th scope="col">商品码</th>
                            <th scope="col">卖家信息</th>
                            <th scope="col">售后服务</th>
                            <th scope="col">操作</th>
                            <th scope="col">活动价格</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goods">
                            <th scope="row">{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.originalPrice}}</td>
                            <td>
                                {{good.appearance}}{{good.function}}
                                {{good.controlType}}{{good.size}}
                                {{good.material}}
                            </td>
                            <td>{{good.category}}</td>
                            <td>{{good.barCode}}</td>
                            <td>{{good.sellerId}}</td>
                            <td>{{good.afterSale}}</td>
                            <td>
                                <input type="checkbox" class="custom-control-input " :id='"switch"+good.id'
                                       v-model:checked="good.eventStatus"
                                       @click="eventSwitch(good.eventStatus,good.id)">
                                <label class="custom-control-label" :for='"switch"+good.id'>开启活动</label>
                            </td>
                            <td>
                                <input type="text" :id="good.id" v-model:value="good.currentPrice"
                                       @change="changePrice(good.id,good.currentPrice)">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End Wrapper-->


        <!--Start  Footer -->
        <footer id="footer" class="footer-main"></footer>
        <!--End footer -->

    </div>
    <!--End main content -->

</div>
<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== http util js ======-->
<script src="assets/js/util/http-util.js"></script>
<script src="assets/js/bootstrap-switch.min.js"></script>
</body>
<script>
    $(function () {
        $('#footer').load('footer.html');
        $('#nav-left').load('nav-left.html');
    })
</script>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goods: [],
            events: {
                event: [],
            },
        },
        watch: {
            event: function () {
                console.log("change")
                console.log(this.event)
            }
        },
        methods: {
            getGoods: function () {
                console.log("getGoods");
                let thisObj = this;
                let url = "/shop_admin/goodsManage/getAllGoods";
                doGet(url, function (resp) {
                    thisObj.goods = resp;
                    console.log(thisObj.goods)
                })
            },
            eventSwitch: function (status, id) {
                let eventStatus;
                if (status === 0 || status === false) {
                    eventStatus = "1";
                } else {
                    eventStatus = "0";
                }
                let url = "/shop_admin/goodsManage/updateEvent";
                let params = {
                    status: eventStatus,
                    goodId: id,
                };
                doPost(url, params, function () {
                    console.log("change status success");
                });
            },
            changePrice: function (id, currentPrice) {
                let url = "/shop_admin/goodsManage/updateCurrentPrice";
                let params = {
                    currentPrice: currentPrice,
                    goodId: id,
                }
                doPost(url, params, function () {
                    console.log("change currentPrice success");
                })
                // console.log("id:" + id);
                // console.log("currentPrice:" + currentPrice)
            }
        },
        mounted: function () {
            this.getGoods();
        }
    })
</script>

